/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *    https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

@import './variables.scss';

#app {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}

.header-item {
  height: $layout-header-height;
  border-radius: 0;
  box-sizing: border-box;
  padding: 0 16px;
  cursor: pointer;
  @include flexbox($justify: center, $align: center);

  &:hover {
    background-color: var(--color-primary);
  }

  :deep(.svg-icon) {
    width: 20px;
    height: 20px;
  }
}

// temp resolve error on console
.ant-modal div[aria-hidden='true'] {
  display: none !important;
}

:where(.ant-modal-header) {
  margin-bottom: 16px !important;
}


.header-title {
  font-weight: 500;
  margin-bottom: $space-md;
}


.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: inline-block;
  position: relative;
}


.job-progress-notification{
  &:hover{
    background-color: $color-bg-layout;
    cursor: pointer;
  }
  .ant-notification-notice-close{
    top: 16px !important;
  }
  :where(.ant-notification-notice-content){
 
    .ant-notification-notice-message,
    .ant-notification-notice-description {
      margin-left: 50px !important;
      margin-bottom: 0 !important; 
      padding-inline-end: calc(24px / 2);
      .ant-progress-line{
        margin-bottom: 6px !important;
      }
    }
  
    .ant-notification-notice-message{
      font-size: 14px !important;
      font-weight: 500 !important;
    }
  
    .ant-notification-notice-icon{
      top: 50%;
      transform: translateY(-50%);
      margin: auto;
    }
  }
}


.text-loading::after {
  content: '';
  display: inline-block;
  animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
  0% {
    content: '';
  }
  16% {
    content: '.';
  }
  32% {
    content: '..';
  }
  48% {
    content: '...';
  }
  80% {
    content: '....';
  }
  96% {
    content: '.....';
  }
  100% {
    content: '......';
  }
}


